<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图书管理</title>
    <script src="./vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        #app{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content:center;
            align-items:center;
            flex-direction: column;
        }
        .bgc-lightskyblue{
            background-color: lightskyblue;
        }
        .form{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .id, .name, .submit{
            display: flex;
            align-items: center;
        }
        .h-50{
            height: 30px;
        }
        .w-50{
            width: 50px;
        }
        .w-600{
            width: 600px;
        }
        .list{
            border-collapse:collapse;
        }
        .list th,.list td{
            border: solid 1px #2c2c38;
        }
        .list td{
            text-align: center;
        }

    </style>
</head>
<body>
    <div id="app">
        <form class="form w-600 h-50 bgc-lightskyblue">
            <div class="id h-50">
                <label for="input_id">序号</label>
                <input type="text" id="input_id" v-model="id" :readonly="readonly" :disabled="readonly"/>
            </div>
            <div class="name h-50">
                <label for="input_name">书名</label>
                <input type="text" id="input_name" v-model="name" />
            </div>
            <div class="submit h-50 w-50">
                <input type="submit" class="w-50" @click.prevent="toSave" :disabled="disabled_submit" />
            </div>
        </form>
        <table class="list w-600" cellspacing="0" >
            <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="book in books">
                   <td>{{ book.id }}</td>
                   <td>{{ book.name }}</td>
                   <td v-if="book.update_time.length != 0">{{ book.update_time | formatDate}}</td>
                   <td v-else>{{ book.update_time}}</td>
                   <td>
                       <a href="#" @click.prevent="toEdit(book.id)">修改</a>
                       <span> | </span>
                       <a href="#" @click.prevent="toDelete(book.id)">删除</a>
                   </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data:{
            readonly: false,
            id: "",
            name: "",
            books: [],
            disabled_submit: true,
            tips: "",
        },
        mounted(){
            this.books = [
                {
                    id: "1",
                    name: "三国演义",
                    update_time: ""
                },
                {
                    id: "2",
                    name: "西游记",
                    update_time: ""
                },
                {
                    id: "3",
                    name: "水浒传",
                    update_time: ""
                },
                {
                    id: "4",
                    name: "红楼梦",
                    update_time: ""
                },
            ];
        },
        methods:{
            // 点击修改，显示到顶部输入框，同时disable顶部id输入框
            toEdit: function(id){
                let book = this.books.filter(book => book.id == id)[0];
                this.id = book.id;
                this.name = book.name;
                this.readonly = true;
            },
            // 点击删除，删除对应的数据
            toDelete: function(id){
                this.books = this.books.filter(book => book.id != id);
            },
            // 点击保存
            toSave: function(){
                if (this.id.trim().length == 0 || this.name.trim().length == 0) {
                    alert("序号或书名不能为空白字符");
                    return ;
                }
                let index = this.books.findIndex(book => book.id == this.id);
                if (index === -1) {
                    index = this.books.findIndex(book => book.name == this.name);
                    if (index === -1) { // 执行新增操作
                        this.books.push({
                            id: this.id,
                            name: this.name,
                            update_time: new Date()
                        });
                        this.init();
                    } else {
                        alert(`该书本已存在，序号：${this.books[index].id}，名称：${this.books[index].name}`);
                        return ;
                    }
                } else {
                    this.books[index].name = this.name;
                    this.books[index].update_time = (new Date()).getTime();
                    this.init();
                    return ;
                }
            },
            // 更新是否提交按钮是否开启状态标志
            updateDisabledSubmit: function(){
                this.disabled_submit = (this.id.length == 0) || (this.name.length == 0);
            },
            // 重新初始化对应值
            init: function(){
                this.id = "";
                this.name = "";
            }
        },
        watch:{
            // 侦听id和name变量，确认是否放开提交按钮
            id: function(id){
                this.id = id;
                this.updateDisabledSubmit();
            },
            name: function(name){
                this.name = name;
                this.updateDisabledSubmit();
            }
        },
        filters: {
            formatDate: function (time, formatStr) {
                let date = new Date(time);
                let Y = date.getFullYear();
                let M = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
                let D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate();
                let h = date.getHours();
                let m = date.getMinutes();
                let s = date.getSeconds();
                formatStr = formatStr || 'YYYY-MM-DD H:m:s';
                return formatStr.replace(/YYYY|MM|DD|H|m|s/ig, function (matches) {
                    return ({
                        YYYY: Y,
                        MM: M,
                        DD: D,
                        H: h,
                        m: m,
                        s: s
                    })[matches];
                });
            }
        }
    });
</script>
</html>